<template>
    <div>
        <!-- 页面：Setting个人设置 -->
        <page-main>
            <el-tabs tab-position="left" style="height: 600px;">
                <el-tab-pane label="基本设置" class="basic">
                    <el-card class="box-card" style="width: 400px;">
                        <div slot="header" class="clearfix">
                            <span>{{ admin.userName }}</span>
                        </div>
                        <div style="display: flex; justify-content: center;">
                            <el-upload action="/userCenter/updateAvatar" :headers="headers" :data="uploadParam" :show-file-list="false" :on-success="onSuccess">
                                <img title="点击修改用户头像" :src="admin.userAvatar" alt="" style="height: 100px; width: 100px; border-radius: 50px;">
                            </el-upload>
                        </div>
                        <div>用户名：<el-tag>{{ admin.userName }}</el-tag></div>
                        <div>昵称：<el-tag>{{ admin.nickName }}</el-tag></div>
                        <div>手机号码：<el-tag>{{ admin.userMobile }}</el-tag></div>
                        <div>邮箱：<el-tag>{{ admin.userEmail }}</el-tag></div>
                        <div>用户标签：<el-tag v-for="(r, index) in admin.roles" :key="index" type="success">{{ r.roleName }}</el-tag></div>
                        <div style="display: flex; justify-content: space-around; margin-top: 10px;">
                            <el-button type="primary" @click="showUpdateAdminInfoView">修改信息</el-button>
                            <el-button type="danger" @click="editPassword">修改密码</el-button>
                        </div>
                    </el-card>
                    <el-dialog title="编辑用户信息" :visible.sync="centerDialogVisible" width="30%" center>
                        <div>
                            <table>
                                <tr>
                                    <td>昵称</td>
                                    <td><el-input v-model="admin.nickName"></el-input></td>
                                </tr>
                                <tr>
                                    <td>手机号码</td>
                                    <td><el-input v-model="admin.userMobile"></el-input></td>
                                </tr>
                                <tr>
                                    <td>邮箱</td>
                                    <td><el-input v-model="admin.userEmail"></el-input></td>
                                </tr>
                            </table>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="UpdateAdminInfo">确 定</el-button>
                        </span>
                    </el-dialog>
                </el-tab-pane>
                <el-tab-pane label="安全设置" class="security">
                    <h2>安全设置</h2>
                    <div class="setting-list">
                        <div class="item">
                            <div class="content">
                                <div class="title">账户密码</div>
                                <div class="desc">当前密码强度：强</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="content">
                                <div class="title">密保手机</div>
                                <div class="desc">已绑定手机：187****3441</div>
                            </div>
                            <div class="action">
                                <el-button type="text">修改</el-button>
                            </div>
                        </div>
                        <div class="item">
                            <div class="content">
                                <div class="title">备用邮箱</div>
                                <div class="desc">当前未绑定备用邮箱</div>
                            </div>
                            <div class="action">
                                <el-button type="text">绑定</el-button>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </page-main>
    </div>
</template>

<script>
import {Message} from 'element-ui'
import store from '@/store'

export default {
    name: 'PersonalSetting',
    beforeRouteLeave(to, from, next) {
        if (['personalEditPassword'].includes(to.name)) {
            this.$store.commit('keepAlive/add', 'PersonalSetting')
        }
        next()
    },
    props: {},
    data() {
        return {
            headers: {
                Authorization: window.localStorage.getItem('token')
            },
            admin: {},
            uploadParam: {id: ''},
            centerDialogVisible: false
        }
    },
    created() {},
    mounted() {
        this.initAdmin()
    },
    methods: {
        onSuccess() {
            this.initAdmin()
        },
        UpdateAdminInfo() { // 确认修改信息
            this.putRequest('/userCenter/updateAccount', this.admin).then(resp => {
                if (resp) {
                    Message.success({message: resp.data.message})
                    this.centerDialogVisible = false
                    this.initAdmin()
                }
            })
        },
        showUpdateAdminInfoView() { // 点击修改信息弹框
            this.centerDialogVisible = true
        },
        initAdmin() { // 获取初始化个人信息数据
            this.getRequest('/userCenter/accountInfo').then(resp => {
                if (resp.status === 200) {
                    this.admin = resp.data
                    this.uploadParam.id = this.admin.userId
                    // 更新了头像后 将储存在store里的头像信息改成新头像地址
                    this.$store.state.user.account.userAvatar = resp.data.userAvatar
                }
            })
        },
        // handleSuccess(res) {
        //     if (res.error === '') {
        //         this.form.headimg = res.data.path
        //     } else {
        //         this.$message.warning(res.error)
        //     }
        // },
        editPassword() { // 修改密码跳转路由
            this.$router.push({
                name: 'personalEditPassword'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tabs {
    .el-tabs__header .el-tabs__nav {
        .el-tabs__active-bar {
            z-index: 0;
            width: 100%;
            background-color: #e1f0ff;
            border-right: 2px solid #409eff;
        }
        .el-tabs__item {
            text-align: left;
            padding-right: 100px;
        }
    }
    .el-tab-pane {
        padding: 0 20px 0 30px;
    }
}
.basic {
    ::v-deep .headimg-upload {
        > div {
            text-align: center;
        }
        .el-upload-dragger {
            border-radius: 50%;
        }
    }
}
.security {
    .setting-list {
        .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #e8e8e8;
            .content {
                .title {
                    margin-bottom: 5px;
                    color: #666;
                }
                .desc {
                    font-size: 14px;
                    color: #999;
                }
            }
            &:last-child {
                border-bottom: 0;
            }
        }
    }
}
</style>
